<template>
	<view class="page-content">
		<view class="page-top">
			<view class="page-top-bg">
				<!-- 用户信息 -->
				<view class="page-box-user" @click="todetail">
					<view class="page-box-user-l">
						<image class="user-img" :src="userInfo.img || defaultImg"></image>
						<view class="page-box-user-t">
							<view class="user-name">{{userInfo.nickname}}</view>
							<view class="user-time">{{userInfo.mobile}}</view>
						</view>
					</view>
					<view class="page-box-user-r">个人信息</view>
				</view>
				<view class="page-box-cen" @click="toviplink">
					<image class="page-top-l" src="/static/user/icon-hb.png"></image>
					<view class="page-top-r">
						<view class="txt">尊敬的{{userInfo.nickname}}</view>
						<template v-if="companyInfo.exp_time > datatime">
						     <view class="txt">贵公司的会员将在{{parseTime(companyInfo.exp_time,'{y}-{m}-{d}')}}到期</view>
						</template>
						<template v-else>
						     <view class="txt">贵公司的会员已在{{parseTime(companyInfo.exp_time,'{y}-{m}-{d}')}}到期了</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!--内容-->
		<view class="page-body">
			<view class="user-box" v-if="userInfo.type === 1 || userInfo.type === 0">
				<navigator hover-class="none" :url="`${item.url}`" class="box-ul" v-for="(item,index) in list"
					:key="index">
					<view class="box-li" v-if="item.state">
						<view class="box-li-l">
							<image class="box-li-l-img" :src="item.icon"></image>
							<view class="box-li-l-txt">{{item.name}}</view>
						</view>
						<view class="box-li-r icons icon-gengduo"></view>
					</view>
				</navigator>
			</view>
			<view class="user-box" v-else-if="userInfo.type === 2">
				<navigator hover-class="none" :url="`${item.url}`" class="box-ul" v-for="(item,index) in list2"
					:key="index">
					<view class="box-li">
						<view class="box-li-l">
							<image class="box-li-l-img" :src="item.icon"></image>
							<view class="box-li-l-txt">{{item.name}}</view>
						</view>
						<view class="box-li-r icons icon-gengduo"></view>
					</view>
				</navigator>
			</view>
			<view class="user-box2">
				<view class="box-li" @click="tologinout">
					<view class="box-li-l">
						<image class="box-li-l-img" :src="$mAssetsPath.icon_guanji"></image>
						<view class="box-li-l-txt">退出登陆</view>
					</view>
				</view>
			</view>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit">退出</view>
				<view class="w-con">
					<view class="txt-row">是否退出？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getUserInfos
	} from '@/common/api.js';
	import wPopup from '@/components/w-popup/w-popup2.vue'; // 弹窗
	import {
		parseTime
	} from '@/common/util'
	export default {
		components: {
			wPopup
		},
		data() {
			return {
				objdata: {
					name: '',
					mobile: '',
					img: '',
					lasttime: '',
				},
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				defaultImg: "/static/icon/missing-face.png", // 加载失败的占位图片
				datatime:0
			}
		},
		computed: {
			...mapGetters(['companyInfo','userInfo','userRole']),
			list() {
				return [{
						icon: '/static/icon/icon-ptgl.png',
						name: '平台管理',
						url: '/pages/user/pluponform',
						state: true
					}, {
						icon: '/static/icon/icon-ggtz.png',
						name: '公告通知',
						url: '/pages/news/notification?type=m',
						state: this.userRole.noticeStatu
					}, {
						icon: '/static/icon/icon-pophuace2.png',
						name: 'POP画册',
						url: '/pages/picBook/picBookList?pageType=pro&pageStatu=1&userType=user&is_pro=t',
						state: this.userRole.proOrderStatu
					}, {
						icon: '/static/icon/icon-popxdgl.png',
						name: 'POP下单管理',
						url: '/pages/picBook/picBookList?pageType=pop&pageStatu=1&userType=user',
						state: this.userRole.popOrderStatu
					}, {
						icon: '/static/icon/icon-djxdgl.png',
						name: '道具下单管理',
						url: '/pages/picBook/picBookList?pageType=prop&pageStatu=1&userType=user',
						state: this.userRole.propOrderStatu
					}, {
						icon: '/static/icon/icon-sjtj.png',
						name: '数据统计',
						url: '/pages/picBook/statisticsList',
						state: this.userRole.countStatu1 || this.userRole.countStatu2
					}
				];
			},
			list2() {
				return [{
						icon: '/static/icon/icon-sjtj.png',
						name: '记事本',
						url: '/pages/noteBook/noteBookList?pageType=4',
						state: 1
					}
				];
			}
		},
		onShow() {
			this.getdata();
			this.datatime = Math.round(new Date().getTime()/1000);
			console.log(222,this.datatime)
		},
		methods: {
			...mapActions('user',['setUserInfo','loginOut']),parseTime,
			getdata() {
				getUserInfos({
					company_id: this.companyInfo.id
				}).then(res => {
					console.log(123, res)
					if (res.code === 2000) {
						this.objdata = res.data;
						this.setUserInfo(res.data);
					}
				})
			},
			confirm() {
				uni.removeStorageSync('token_key');
				uni.removeStorageSync('company_key');
				uni.removeStorageSync('select_key');
				uni.removeStorageSync('userInfo_key');
				uni.removeStorageSync('userSig_key');
				uni.clearStorageSync();
				//uni.clearStorage();
				uni.showToast({
					title:'退出成功',
					duration:2000,
					icon:'none'
				})
				uni.reLaunch({
					url: `/pages/login/login`
				})
			},
			//跳转会员中心
			toviplink() {
				if(this.userInfo.type === 1 || this.userInfo.type === 0){
					uni.navigateTo({
						url: "/pages/user/vipContent"
					})
				}
				
			},
			//跳转详细页
			todetail() {
				uni.navigateTo({
					url: "/pages/user/userInfo"
				})
			},
			//退出登录
			tologinout() {
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
			},
			//取消
			cancel() {
				this.show = false
				this.showtip = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $font-color-9;
			}
		}
	}

	.page-content {
		width: 100%;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-top {
			background: $uni-bg-color;

			.page-top-bg {
				display: flex;
				flex-direction: column;
				background-image: url('/static/user/user-bg.png');
				background-repeat: no-repeat;
				background-size: 100% auto;

				//用户信息
				.page-box-user {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 120rpx;
					padding-left: 30rpx;
					margin: 140rpx 0 40rpx 0;

					.page-box-user-l {
						display: flex;
						align-items: center;

						.user-img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 60rpx;
							margin-right: 24rpx;
							background: rgba(255, 255, 255, .1);
						}

						.page-box-user-t {
							display: flex;
							flex-direction: column;

							.user-name {
								font-size: 32rpx;
								font-weight: 400;
								color: $font-color-3;
								line-height: 50rpx;
							}

							.user-time {
								font-size: 28rpx;
								color: $font-color-3;
								line-height: 50rpx;
							}
						}
					}

					.page-box-user-r {
						display: flex;
						align-items: center;
						height: 40rpx;
						border-radius: 20rpx 0 0 20rpx;
						background: $uni-bg-color-grey;
						font-size: 22rpx;
						line-height: 40rpx;
						color: #313131;
						padding: 0 30rpx;
					}
				}

				.page-box-cen {
					margin: 0 30rpx 30rpx 30rpx;
					height: 110rpx;
					background: #2F344A;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					padding: 0 30rpx;

					.page-top-l {
						width: 60rpx;
						height: 72rpx;
						margin-right: 30rpx;
					}

					.page-top-r {
						font-size: 24rpx;
						line-height: 40rpx;
						color: $font-color-w;
					}
				}
			}
		}

		//内容
		.page-body {
			display: flex;
			flex-direction: column;

			.user-box,
			.user-box2 {
				display: flex;
				flex-direction: column;
				width: 100%;
				padding: 0 30rpx;
				margin-bottom: 10rpx;
				background: $uni-bg-color;

				.box-li {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					height: 94rpx;
					border-bottom: 1rpx solid #f5f5f5;

					.box-li-l {
						display: flex;
						align-items: center;

						.box-li-l-img {
							width: 40rpx;
							height: 40rpx;
							margin-right: 18rpx;
						}

						.box-li-l-txt {
							font-size: 32rpx;
							font-weight: 400;
							color: $font-color-3;
						}
					}
				}

				.box-li-r {
					color: $font-color-9;
				}
			}
		}


	}
</style>
